<template>
  <view class="padding-sm">
    <swiper :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <!-- 循环渲染轮播图的 item 项 -->
      <swiper-item v-for="(item, i) in swiperList" :key="i">
        <navigator class="swiper-item">
          <!-- 动态绑定图片的 src 属性 -->
          <image class="swiper-img" :src="item.imgSrc"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 分类导航区域 -->
    <view class="nav-list bg-white">
      <view class="nav-item" v-for="(item, i) in navList" :key="i" @click="clickNav(item)">
        <!-- 动态绑定图片的 src 属性 -->
        <image :src="item.imgSrc" class="nav-img"></image>
        <text>{{item.title}}</text>
      </view>
    </view>
    <!-- 问卷调查 -->
    <view class="question-survey padding flex align-center padding-xl radius shadow shadow-lg "
      @click="handleContainerClick">
      <image class="question-img" :src="questionImg"></image>
      <view class="text-container">
        <text class="title">专科查体</text>
        <text class="description">我的个人健康评估</text>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    onLoad() {
      // 初始化图片
      if (this.$staticUrl) {
        this.questionImg = this.$staticUrl + 'page-icon-question.png';
      } else {
        console.error('staticUrl 未定义');
      }
      // 对页面中的对象初始化
      this.getSwiperList();
      this.getNavList();
    },
    methods: {
      // 获取轮播图的list
      async getSwiperList() {
        const {
          data: res
        } = await uni.$http.get('/static/swiper')
        // 判断是否获取失败
        if (res.code !== 200) return uni.$showMsg()
        this.swiperList = res.data;
      },

      handleContainerClick() {
        // 在这里添加处理点击事件的逻辑
        // 跳转到列表页面
        uni.navigateTo({
          url: '/pages/evaluation_list/evaluation_list'
        })
      },

      // 点击轮播事件
      clickNav(item) {
        uni.navigateTo({
          url: item.navUrl
        })
      },

      // 获得导航栏
      async getNavList() {
        const {
          data: res
        } = await uni.$http.get('/static/navigation')
        // 判断是否获取失败
        if (res.code !== 200) return uni.$showMsg()
        this.navList = res.data
      },

    },

    data() {
      return {
        questionImg: "",
        swiperList: [],
        navList: []
      };
    }
  }
</script>

<style lang="scss">
  // 问卷调查
  .question-survey {
    /* 其他样式 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

    /* 添加阴影效果 */
    .question-img {
      width: 75px;
      height: 75px;
    }

    .text-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 15px;
      margin-top: -39px;

      /* 调整文本容器的上边距，将字体布局偏上 */
      .title {
        color: #000;
        /* 设置标题的颜色为黑色 */
        font-size: 14px;
        /* 设置标题的字体大小为18px */
      }

      .description {
        color: #888;
        /* 设置描述的颜色为偏灰色 */
        font-size: 12px;
        /* 设置描述的字体大小为14px */
      }
    }

    background-color: #E6E6FA;
    /* 浅紫色的十六进制表示 */
    width: 100%;
    height: 100px;
    border-radius: 8px;
    margin-top: 10px;
  }


  // 顶部轮播
  .swiper-item {
    height: 140px;
    width: 100%;
    text-align: center;


    .swiper-img {
      display: block;
      /* 设置图片为块级元素，使其可以设置宽高和居中 */
      margin: 0 auto;
      /* 设置图片左右居中 */
      height: 100%;
      width: 375px;
      border-radius: 8px;
    }
  }

  .nav-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .nav-item {

      width: 25%;
      margin-bottom: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 60px;
        height: 60px;
      }

      text {
        font-size: 12px;
      }
    }
  }
</style>